import 'dart:io';

import 'package:aichat_flutter_wallet/module_common/utils/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_scankit/flutter_scankit.dart';

double boxSize = 260;

class ScanningAnimation extends StatefulWidget {
  const ScanningAnimation();

  @override
  _ScanningAnimationState createState() => _ScanningAnimationState();
}

class _ScanningAnimationState extends State<ScanningAnimation> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(
      begin: -1.0,
      end: 1.0,
    ).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.linear,
      ),
    )..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _animationController.reverse();
        } else if (status == AnimationStatus.dismissed) {
          _animationController.forward();
        }
      });
    _animationController.forward();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.translate(
          offset: Offset(0.0, _animation.value * 100),
          child: child,
        );
      },
      child: Image.asset(
        'assets/images/wallet-trade/scan-img.png',
        width: 216,
        height: 28,
      ),
    );
  }
}

class CustomView extends StatefulWidget {
  const CustomView({Key? key}) : super(key: key);
  @override
  State<CustomView> createState() => _CustomViewState();
}

class _CustomViewState extends State<CustomView> {
  ScanKitController _controller = ScanKitController();

  @override
  void initState() {
    _controller.onResult.listen((result) {
      Future(() {
        Navigator.of(context).pop(result.originalValue);
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var screenWidth = MediaQuery.of(context).size.width;
    var left = screenWidth / 2 - boxSize / 2;
    var top = MediaQuery.of(context).padding.top + (44 + 120);
    var rect = Rect.fromLTWH(left, top, boxSize, boxSize);

    return Scaffold(
      body: SafeArea(
        top: false,
        child: Stack(
          children: [
            ScanKitWidget(
              controller: _controller,
              continuouslyScan: false,
              boundingBox: rect,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(
                  height: MediaQuery.of(context).padding.top,
                ),
                Container(
                  color: Colors.transparent,
                  width: double.infinity,
                  height: 44,
                  child: Stack(alignment: AlignmentDirectional.center, children: [
                    Text(
                      'Scan QR Code',
                      style: TextStyle(fontSize: 16, color: AppColors.c_white, fontWeight: FontWeight.w500),
                    ),
                    Positioned(
                        top: 12,
                        left: 15,
                        child: GestureDetector(
                          onTap: () {
                            Navigator.of(context).pop();
                          },
                          child: Image.asset(
                            'assets/images/common/back-bai.png',
                            width: 20,
                            height: 20,
                          ),
                        ))
                  ]),
                ),
                Expanded(
                    flex: 1,
                    child: Container(
                      color: Colors.transparent,
                      padding: EdgeInsets.symmetric(horizontal: 20),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          SizedBox(
                            height: 120,
                          ),
                          Container(
                            width: 260,
                            height: 260,
                            decoration: BoxDecoration(
                              image: DecorationImage(image: AssetImage('assets/images/wallet-trade/scan-bg.png')),
                            ),
                            child: ScanningAnimation(),
                          ),
                          SizedBox(
                            height: 20,
                          ),
                          Text(
                            'Place the QR code within the frame for scanning',
                            textAlign: TextAlign.center,
                            style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: AppColors.c_white),
                          ),
                          SizedBox(
                            height: 40,
                          ),
                        ],
                      ),
                    ))
              ],
            )
          ],
        ),
      ),
    );
  }
}
